<template>
  <div style="position: relative;" v-if="visible">
    <div class="tl-form-line-title" style="display: block; float: left">流程剪裁</div>
    <el-button icon="el-icon-document-checked" type="text" v-if="!disabled" style="position: absolute; top: 7px; right: 15px" @click="tempSaveAll" :loading="saveLoading">保存</el-button>
    <div style="padding-left:15px;">
      <el-table ref="mainTable" class="tl-table tl-table-fix" v-loading="loading" :data="datas" border fit>
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" width="150px" sortable="custom" sort-by="name" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="introduce" label="说明" min-width="350px" sortable="custom" sort-by="introduce" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="点亮剪裁" width="150px" sortable="custom" sort-by="introduce" align="center" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <i class="el-icon-error" :style="{ color: scope.row.skiped ? '#F56C6C' : '#ccc', cursor: 'pointer', fontSize: '22px', verticalAlign: 'middle' }" @click="change(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import { mixin_approval } from '@tapui/mixins/mixin_approval'
/** 子组件 */
/** 工具类 */
import { getAction, postAction } from '@tapui/utils/http'
import { validateNull } from '@tapui/utils/validate'

/** VUE配置 */
export default {
  mixins: [mixin_list, mixin_approval],
  components: {},
  data() {
    return {
      moduleTitle: '检查项',
      urlPrefix: '/base/flowSkip/',
      url: {
        // 额外的url
        queryList: '/base/flowSkip/queryFlowSkip',
        saveData: '/base/flowSkip/saveData'
      },
      isQueryOnCreated: false,
      approvalNodeModel: {},
      disableEditSubmit: false,
      visible: false,
      flowid: 0,
      nodeid: 0,
      flowinsid: 0,
      nodeinsid: 0,
      saveLoading: false
    }
  },
  props: {
    render: {
      default: 'div',
      type: String
    },
    disabled: {
      default: true,
      type: Boolean
    },
    // 关联流程
    sourceType: {
      default: '',
      type: String
    }
  },
  methods: {
    close() {},
    open() {
      this.visible = false
      if (this.approvalNodeModel && this.approvalNodeModel.hasOwnProperty('nodetype')) {
        this.filtersInfo.nodeType = this.approvalNodeModel.nodetype
      }
      // 页面加载完毕执行
      if (this.flowid) {
        this.filtersInfo.flowid = this.flowid
      }
      this.filtersInfo.sourcetype = this.sourceType
      this.filtersInfo.sourceid = this.id

      this.loadData()
    },
    /** 列表数据加载开始 */
    loadData(paramMap) {
      if (!this.beforeLoadData()) return
      // 查询条件
      var params = this.getQueryParams()
      // 数据查询
      this.loading = true
      getAction(this.url.queryList, params)
        .then((res) => {
          if (res.success) {
            this.datas = res.result
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.afterLoadData()
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    afterLoadData() {
      if (!this.datas || this.datas.length === 0) {
        this.visible = false
        return
      }
      this.visible = true
    },
    asynSave(resolve, reject) {
      if (!this.visible || this.disabled) {
        resolve({ success: true })
        return
      }
      let codes = ''
      this.datas.forEach((item) => {
        if (item.skiped) {
          codes += ',' + item.code
        }
      })
      if (codes.length > 0) {
        codes = codes.substring(1)
      }
      let paraMap = {
        codelist: codes,
        flowid: this.flowid,
        sourcetype: this.sourceType,
        sourceid: this.id
      }
      postAction(this.url.saveData, paraMap).then((res) => {
        resolve(res)
      })
    },
    change(row) {
      if (!this.visible || this.disabled) {
        return
      }
      if (row.skiped) {
        this.$set(row, 'skiped', false)
      } else {
        this.$set(row, 'skiped', true)
      }
    },
    tempSaveAll() {
      if (!this.visible || this.disabled) {
        return
      }
      let codes = ''
      this.datas.forEach((item) => {
        if (item.skiped) {
          codes += ',' + item.code
        }
      })
      if (codes.length > 0) {
        codes = codes.substring(1)
      }
      let paraMap = {
        codelist: codes,
        flowid: this.flowid,
        sourcetype: this.sourceType,
        sourceid: this.id
      }
      this.loading = true
      postAction(this.url.saveData, paraMap).then((res) => {
        this.loading = false
        if (res.success) {
          this.$tap.message(res.message, 'success')
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    syncSave(resolve, reject) {
      if (!this.visible || this.disabled) {
        resolve()
        return
      }
      let codes = ''
      this.datas.forEach((item) => {
        if (item.skiped) {
          codes += ',' + item.code
        }
      })
      if (codes.length > 0) {
        codes = codes.substring(1)
      }
      let paraMap = {
        codelist: codes,
        flowid: this.flowid,
        sourcetype: this.sourceType,
        sourceid: this.id
      }
      this.loading = true
      postAction(this.url.saveData, paraMap).then((res) => {
        this.loading = false
        if (res.success) {
          resolve()
        } else {
          reject(res.message)
        }
      })
    }
  },
  created() {
    this.visible = false
  }
}
</script>
<style scoped></style>
